<template>
    <el-row :gutter="20" class="main-t elRow">
        <el-col :span="24">
    <div class="main-t"  :data="GoodsDada">
        <div class="img">
            <a class="openImg">
                <el-image
                        style=" width: 20rem; height: 20rem;"
                        :src=GoodsDada.goodsImg.goodsImgUrl
                ></el-image>
            </a>
        </div>
        <div class="product">
            <div class="title">
                <h1>{{GoodsDada.goodsImg.goodsImgName}}</h1>
                <div class="list">
                    <span>分类：{{GoodsDada.goodsType.goodsTypeName}}</span>
                    <span>编码：{{GoodsDada.goodsId}}</span>
                </div>
            </div>
            <div class="product-detail-item">
                <div class="control-group">
                    <span>市场价格：</span>
                    <span>{{GoodsDada.goodsMarketPrice}}</span>
                </div>
                <div class="control-group">
                    <span>订货价格：</span>
                    <span class="red">￥{{GoodsDada.goodsOrderPrice}}</span>
                </div>
            </div>
            <div class="control-group">
                <div>
                    <span>计量单位：</span>
                    <span style="margin-left:0.5rem">{{GoodsDada.goodsUnit.goodsUnitName}}</span>
                </div>
                <div style="line-height: 3.5rem">
                    <span style="float: left;">购买数量:</span>
                    <span class="spec2" >
                         <el-input v-model=num></el-input>
                    </span>
                </div>
            </div>
            <div class="control-group" style="overflow: hidden">
                <div class="bottom">
                    <a @click="cart" :plain="true">
                        <i class="el-icon-shopping-cart-1"></i>
                        加入购物车</a>
                </div>
                <div class="bottom one" v-show="bottonOne">
                    <a @click="collection" :plain="true">
                        <i class="el-icon-star-off" ></i>
                        {{message}}</a>
                </div>
                <div class="bottom two" v-show="bottonTwo">
                    <a @click="collection" :plain="true">
                        <i class="el-icon-star-off" ></i>
                        {{message}}</a>
                </div>
            </div>
        </div>
    </div>
        </el-col>
    </el-row>
</template>

<script>
    import {mapActions,mapGetters} from 'vuex'
    export default {
        name: "GoodsDetails",
        data(){
            return{
                num:'0',
                message:"加入收藏",
                bottom:'',
                bottonOne:true,
                bottonTwo:false,
                timer:'',
                obj:0,
            }
        },
        created(){
            this.DataDetail().then(res => {    //商品详情

            })
            this.AddCollent().then(res=>{

            })
            this.DelCollent().then(res=>{

            })
            this.addCars().then(res => {    //加入购物车

            })
        },
        computed:{
            GoodsDada(){   //商品详情
                return this.$store.state.queryGoodsDetail.GoodsDadaDetail
            },
            addDada(){   //商品收藏
                return this.$store.state.queryGoodsDetail.addDada
            },
            delDada(){   //商品取消收藏
                return this.$store.state.queryGoodsDetail.delDada
            },
            getGoodsCar(){    //加入购物车
                return this.$store.state.addCar.GoodsCar
            }
        },
        methods:{
            ...mapActions(['DataDetail','AddCollent',"DelCollent",'addCars',
            ]),
            ...mapGetters(['getNowTime']),
            getNowFormatDate() {
                var date = new Date();
                var seperator1 = "-";
                var seperator2 = ":";
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                    + " " + date.getHours() + seperator2 + date.getMinutes()
                    + seperator2 + date.getSeconds();
                return currentdate;
            },  //获取时间
            cart(){  //加入购物车
                this.GoodsDada.num=parseInt(this.num)
                let obj=this.GoodsDada.num
                let id=this.GoodsDada.goodsId
                // console.log(this.GoodsDada)
                let time=this.getNowFormatDate()
                if(this.GoodsDada.availableStockNumber>=this.GoodsDada.num&&this.GoodsDada.num>0){
                    this.$message({
                        duration:1000,
                        iconClass:'el-icon-success',
                        dangerouslyUseHTMLString: true,
                        message: '<p style="margin-left: 2rem">成功加入购物车！</p>'
                    });
                    let a={
                        obj,
                        id,
                        time
                    }
                    this.addCars(a)
                } else  if(this.num==='0'){
                    this.$message.error('加入购物车数量不能为0！');
                }else {
                    this.$message.error('订购数量错误！');
                }
            },
            collection(){  //加入收藏
                if(this.message==='加入收藏'){
                       this.message='取消收藏'
                       this.bottonOne=false
                       this.bottonTwo=true
                       let id = this.GoodsDada.goodsId
                       this.AddCollent(id)
                       this.$message({
                           duration:2000,
                           iconClass:'el-icon-success',
                           dangerouslyUseHTMLString: true,
                           message: '<p style="margin-left: 2rem">成功加入收藏!</p>'
                       });
                }else {
                    this.message = '加入收藏'
                    this.bottonOne = true
                    this.bottonTwo = false
                    let id = this.GoodsDada.goodsId
                    this.DelCollent(id)
                    console.log(this.GoodsDada.isFavorites)
                    this.GoodsDada.isFavorites = 0
                    this.$message({
                        duration: 1000,
                        iconClass: 'el-icon-success',
                        dangerouslyUseHTMLString: true,
                        message: '<p style="margin-left: 2rem">成功取消收藏！</p>'
                    });
                }
            },
            mounted() {
                this.timer = setTimeout(this.cart, 1000);
            },
            beforeDestroy() {
                clearTimeout(this.timer);
            }
        },
    }
</script>

<style scoped>
    *{
        font-size: 12px;
        color: #555
    }
    .xiaoxi{
        position: absolute;
        left: 32rem;
        top: 9rem;
        width: 15rem;
        height: 6rem;
        background-color: white;
        border-radius: 5%;
        box-shadow:0.2rem 0.2rem 2px #cecece;
    }
    .www>span{
        font-size: 16px;
    }
    .www>span>i{
        color: #3dff80;
        font-size: 22px;
    }
    .www{
        width: 10rem;
        margin:2.5rem auto;
    }
    /*=====下面是主体部分*/
    .main-t{
        position: relative;
        padding: 1rem;
        overflow: hidden;
    }
    .img{
        float: left;
        margin: 1rem auto;
    }
.openImg{
    cursor: pointer;
   }
    .openImg>.el-image{
        width: 20rem;
        height: 20rem;
    }
    /*======下面是右边部分*/
    .product{
        float: left;
        margin-left:3rem;
        width: 30rem;
    }
    .title>h1{
        font-weight: 700;
        font-size: 18px;
        margin: 0;
        padding-top: 1rem ;
    }
    .list{
        line-height: 2rem;
    }
    .list>span{
        color: #999;
        margin-right: 2rem;
        /*line-height: 3rem;*/
    }
    .product-detail-item{
        background-color: #f7f7f7;
        padding: 10px 0;
    }
    .control-group{
        padding-left:1.8rem;
        line-height: 2rem;
    }
    .red{
        font-size: 20px;
        color: red;
    }
    .spec2>.el-input{
        width:40%;
        margin-left: 1rem;
    }
    .bottom{
        float: left;
        width:11rem;
        height: 40px;
        line-height: 40px;
        border-radius: 2px;
        padding: 0.1rem 0;
        background-color: #099fb8;
        margin-top: 1rem;
    }
    .bottom>a{
        color: #fff;
        font-size: 16px;
        text-decoration:none;
        width: auto;
        margin:auto 2rem;
        cursor: pointer;
    }
    .bottom>a>i{
        color:  #fff;
        font-size: 16px;
    }
    .one{
        background-color: #e8eaeb ;
        margin-left: 1.8rem;
    }
    .one>a{
        color: #555;
    }
    .one>a>i{
        color: #999;
    }
    .one:hover i{
        color: red;
    }
    .one:hover{
        background-color: #cbced0;
    }
    .two>a{
        color: #555;
    }
    .two>a>i{
        color: red;
    }
    .two{
        background-color: #cbced0;
        margin-left: 1.8rem;
    }
</style>